//给大盒子对象绑定点击事件
var box = document.querySelector('.box')
var cbox = document.querySelector('.contain_box')
// document.querySelector("body > div > div.contain_box")
//获取url地址栏中的参数
var search = location.search
var ss=[]
ss=search.split('?id=')[1]

//获取当前账号
var name1=getCookie('name')
//存放当前商品信息的对象
var o1
//判断当前search是否有值
if (search) { 
    (async function () {
        let txt = await PromiseAjax({
            url: "../php/ANTAdetaile.php",
            data: "uid="+ss
        })     
        //把当前字符串转为对象
        o1 = eval('(' + txt + ')')
        //创建字符串，存放需要渲染的内容
        var str = `    
            <div class="goods">
                <div class="goods_show">
                   
                    <div class="goods_max">
                        <div class="max_box">
                            <img src="${o1.img}" alt="">
                            <div class="fd"></div>
                        </div>
                    </div>
                </div>
                <div class="goods_price">
                    <div class="fdj"><img src="${o1.img}" alt=""></div>
                    <p>安踏</p>
                    <h3>${o1.title}</h3>
                    <p class="much">￥${o1.price}</p>
                    <div class="choice">
                        <div class="choice_p">
                            <img src="${o1.img}" alt="">
                        </div>
                        <div class="size_amount">
                            <div class="size">
                                <span>尺码：</span><input type="text" placeholder="请输入尺码">
                            </div>
                            <div class="amount">
                                <span>数量：</span><input type="text" placeholder="输入购买数量">
                            </div>
                            <div class="join_buy">
                                <a href="javascript:;" class="join">加入购物车</a>
                                <a href="javascript:;" class="buy">立即购买</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
        `
        //把当前拼接好的内容渲染到大盒子中
        cbox.innerHTML = str
        //获取操作对象
var lb = document.querySelector('.max_box')
var rb = document.querySelector('.fdj')
var fdj = document.querySelector('.fd')
var lbp = lb.querySelector('img')
var rbp = rb.querySelector('img')
var lbb = lb.querySelectorAll('li')
//给大盒子对象绑定事件
lb.onmouseover = function () {
    //显示蒙板层和右边的大盒子
    fdj.style.display = 'block'
    rb.style.display = 'block'
}
//隐藏蒙板层和右边的大盒子
lb.onmouseout = function () {
    fdj.style.display = 'none'
    rb.style.display = 'none'
}
//鼠标移动
lb.onmousemove = function () {
    //兼容事件对象
    var e = e || window.event
    //计算蒙板层移动距离
    var fdjl = e.pageX - jsOffsetLeft(lb) - parseInt(fdj.offsetWidth / 2)
    // console.log(fdjl)
    var fdjt = e.pageY - jsOffsetTop(lb) - parseInt(fdj.offsetHeight / 2)
    // console.log(fdjt)
    //设置边界
    var maxx = lb.offsetWidth - fdj.offsetWidth
    var maxy = lb.offsetHeight - fdj.offsetHeight
    //设置图片移动距离
    var imgx, imgy
    //水平方向判断
    if (fdjl <= 0) {
        fdj.style.left = '0px'
        imgx = 0
    } else if (fdjl >= maxx) {
        fdj.style.left = maxx + 'px'
        imgx = maxx;
    } else {
        fdj.style.left = fdjl + 'px'
        imgx = fdjl
    }
    //垂直方向
    if (fdjt <= 0) {
        fdj.style.top = '0px'
        imgy = 0
    } else if (fdjt >= maxy) {
        fdj.style.top = maxy + 'px'
        imgy = maxy
    } else {
        fdj.style.top = fdjt + 'px'
        imgy = fdjt
    }
    //移动右边图片
    rbp.style.left = -1.24 * imgx + 'px'
    rbp.style.top = -1.24 * imgy + 'px'
}

/**  @type {(ele:HTMLElement)=>number} */
function jsOffsetLeft(ele) {
    let sum = 0;

    let eleT = ele;
    while (eleT != document.body) {
        sum += eleT.offsetLeft;
        eleT = eleT.offsetParent;
    }

    return sum;
}

/**  @type {(ele:HTMLElement)=>number} */
function jsOffsetTop(ele) {
    let sum = 0;

    let eleT = ele;
    while (eleT != document.body) {
        sum += eleT.offsetTop;
        eleT = eleT.offsetParent;
    }

    return sum;
}
//点击选择图片
// var djj = document.querySelector('.goods_min')
// var dj1 = djj.querySelectorAll('img')
// var img1 = djj.querySelectorAll('li')
// //遍历选择图片
// for (let i = 0; i < dj1.length; i++) {
//     //添加点击事件
//     dj1[i].onclick = function () {
//         //遍历选择图片点击事件
//         lbp.src = dj1[i].src;
//         rbp.src = dj1[i].src;
//         for (var j = 0; j < img1.length; j++) {
//             img1[j].className = '';
//         }
//         img1[i].className = 'bgcb';
//     }
// }
var tap = document.querySelector('.pp')
var tapp = tap.querySelectorAll('span')
var ps = document.querySelectorAll('.ps')
var xijie = document.querySelector('.xijie')
// getAttritube
for (let z = 0; z < tapp.length; z++) {
    //添加点击事件
    tapp[z].onclick = function () {
        for (var x = 0; x < tapp.length; x++) {
            tapp[x].className = ''
            ps[x].className = 'ps'
        }
        this.className = 'ph'
        ps[z].className = 'ps xijie'
    }
}
    })()
}





//给大盒子对象绑定点击事件
box.onclick = function (e) {
    //事件对象兼容
    var e = e || window.event
    //获取操作目标
    var tg = e.target || e.srcElement
    //判断当前点击的按钮是否为加入购物车
    if (tg.innerHTML == '加入购物车') {
        if (true) {
            //获取该账号在localStorage中存储的商品信息
            var lists = localStorage.getItem(name1)||"[]"
            //把当前获取的内容转为数组对象
            lists = eval('(' + lists + ')')
            //判断当前数组是否有元素
            if (lists.length > 0) {
                //设置开关判断，true表示该商品存在，false表示不存在
                var bool = false
                //遍历数组元素
                lists.forEach(item => {
                    //判断数组中的商品id是否等于当前添加的商品id
                    if (o1.id == item.goods_id) {
                        //直接修改当前商品的数量
                        item.number++
                        bool = true
                    }
                })
                if (bool) {
                    //把当前数组存放到localStorage中
                    localStorage.setItem(name1, JSON.stringify(lists))
                } else {
                    //修改当前商品的数量
                    o1['number'] = 1
                    //直接把当前要添加的商品存放到数组
                    lists.push(o1)
                    //吧当前数组存放到localStorage
                    localStorage.setItem(name1, JSON.stringify(lists))
                }
            } else {
                //修改当前商品的数量
                o1['number'] = 1
                lists.push(o1)
                //吧当前数组存放到localStorage
                localStorage.setItem(name1, JSON.stringify(lists))
            } 
        }
    }
}